<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 配置视口 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 先把bootstrap的css文件引入进来 -->
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">
    <!-- 自己写的less文件
		引入自己写的less文件，rel的值
	-->
    <link rel="stylesheet" href="css/common_section.css">
    <link rel="stylesheet" href="css/baicaijia.css">


    <!-- 配置的模板需要注意:1、type必须是text/html  2、需要配置一个id -->
    <script type="text/html" id="baicaijia-title-template">
        {{each result as value i}}
            <li><a  data-title-id={{value.titleId}} href="#">{{value.title}}</a></li>
        {{/each}}
    </script>
    <title>白菜价</title>
    <script type='text/html' id='product-list-template'>
        {{each result as value i}}
        <div class="media">
            <div class="media-left">
                <a href="#">
                    {{#value.productImg}}
                </a>
            </div>
            <div class="media-body">
                <div class="normal-info">
                    <span class="product-name">{{#value.productName}}</span>
                    <div class="product-price">{{#value.productPrice}}</div>
                </div>
                <div class="other-info">
                    <span class="coupon">{{#value.productCoupon}}</span>
                    <span class="link">{{#value.productHref}}</span>
                </div>
                <div class="get">{{#value.productCouponRemain}}</div>
            </div>
        </div>
        {{/each}}
    </script>
</head>

<body>
<!-- 头部
    语义化标签的使用
    语义化标签存在兼容性问题：引入html5shiv.js库
-->
<header id="header" class='back'>
</header>
<!-- 商品列表 -->
<section id="product">
    <div class="baicaijia-title">
        <ul>

        </ul>
    </div>
    <div class="product-list">

    </div>
</section>

<!-- 底部 -->
<footer id="footer">
</footer>
</body>
<!-- bootstrap.js依赖于jquery.js  所以需要先引入jquery.js

	bootstrap.css jquery.js  bootstrap.js这三个文件的顺序不能错
	jquery.js bootstrap.js这两个js文件的引入最好放在文档的末尾处
	-->
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="libs/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="libs/template/template.js"></script>
<!-- 这里写的就是这个界面.js文件 -->
<script type="text/javascript" src="js/common_section.js"></script>
<script type="text/javascript" src="js/baicaijia.js"></script>

</html>